[자바스크립트] 객체가 문자열인 경우 객체 또는 JSON 타입으로 변경하는 방법

자바스크립트의 객체가 만약 문자열인 경우를 생각해봅니다. 예를들어 input 태그에 문자열로 아래의 값이 저장된 경우를 생각해봅니다.

문자열이지만 원래는 객체임을 한 눈에 알 수 있습니다. 그렇다면 위 문자열을 다시 객체로 변환해보려고 합니다. 어떻게 하면 될까요?

! JSON.parse()를 사용할 경우

가장 먼저 생각하는 방법이 객체로 변환할 수 있는 JSON.parse()입니다. 하지만 에러가 발생합니다.

왜 안될까요? 그 이유는 간단합니다. JSON 타입이 아니기 때문이죠(객체타입임). JSON은 키 값이 따옴표로 랩핑된 형태이죠. 즉 아래와 같이 되어 있어야 에러가 안나게 될 것 입니다.

그럼 어떻게 할까요? 아마 정규표현식을 사용하는 방법이 가장 먼저 떠오릅니다. 아래와 같은 문자열에 정규표현식을 적용한다고 생각합니다.

왠지 너무 복잡해보이네요... 좀 더 간단한 방법이 없을까요?

# 객체 문자열 객체로 변환하는 방법

우리가 아는 eval() 함수를 생각해봅니다. 이 방법을 사용하면 스트링을 리터럴하게 실행할 수 있죠. 바로 이 방법을 이용하면 가능할 것 같습니다 ~ 다만 eval()의 인자로 위 값을 그냥 넘기면 생각처럼 동작하지 않습니다.

역시 에러가 발생합니다. eval() 내부 이므로 뭔가를 실행해야 하므로 간단히 변수 선언을 실행합니다 그래서 test = test로 선언했습니다.

어쨌든 생각해보니 ... ES 6의 템플릿 리터럴 확장을 생각하면 쉽게 구현할 수 있겠죠. 이 때 반드시 `(back tick) 기호를 사용하면 될 것입니다. 아래에서 해보죠.

예상대로 잘 동작하는 군요 ~ 객체 문자열을 객체로 변환할 수 있었습니다.

! JSON 타입으로 변환하기

이제 JSON으로도 변환해봅니다. 문자열을 위의 방법을 동일하게 적용합니다. 그러면 객체를 만들었죠? 저장된 test 변수에 아래의 JSON.stringify()를 사용해 JSON 값으로 변환해봅시다.

위의 값을 보면 키 값들이 모두 "" 따옴표로 랩핑되어 있음을 확인 할 수 있습니다. 정상적으로 모두 JSON으로 변환되었군요. 여기까지 객체 문자열을 객체 또는 JSON으로 변환하는 방법에 대하여 알아봤습니다.

# 마치면서, 이슈 사항 및 기타 내용

위와 같은 방법으로 잘 사용하였지만 생각지 못한 문제점이 있었습니다. 바로 undefined 값을 JSON.stringify()로 변환시 나타나는 이슈입니다...

자세히 말하면 변환할 때 값이 undefined로 선언되어 있는 경우에 해당 값을 undefined로 저장하지 않고 그냥 삭제합니다. 그래서 키 값을 찾을 수 없는 문제가 생길 수 있죠. 결국 변환하기 이전에 undefined값의 여부를 찾아 어떻게 처리해야 할지 ... 다른 방법을 선택해야 할지 고민이 필요합니다.